<template>
	<view>
		<!-- 分享二维码 -->
		<u-popup :show="fxshow" @close="fxclose" mode="center">
			<view class="mainpadding block erwmbjsty">
				<view class="mainpadding2s radius ffffff" style="width: 428rpx;">
					<view class="erwmtu">
						<image src="../static/image/system/ms.png" mode=""></image>
					</view>
					<view class="margin_top2">
						<view class="ershiba xiaohei nofonweight">套餐名称</view>
						<view class="margin_top1 xiaohui ershil nofonweight">
							详情内容详情内容详情内容详情内容详情内容详情内容详情
						</view>
					</view>
				</view>
				<view class="flexbetween margin_top2">
					<view class="xiaolan ershil nofonweight">长按识别图中二维码</view>
					<view class="erwim">
						<image src="../static/image/system/kj.png" mode=""></image>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 分享弹框 -->
		<u-popup :show="show" @close="close">
			<view>
				<view class="mainpadding xiahuaxian dingwei">
					<view class="sanshier fonweight xiaohei textcenter" @click="show = true">分享到</view>
					<view class="guandys" @click="close">
						<u-icon name="close"></u-icon>
					</view>
					<view class="mainpadding">
						<view class="flexleft ">
							<view class="margin_right6" @click="fxshow = true">
								<view class="weixin marginauto"></view>
								<view class="xiaohei ershiba nofonweight textcenter margin_top1">微信</view>
							</view>
							<view class="flexleft">
								<view class="">
									<view class="pengyouq marginauto"></view>
									<view class="xiaohei ershiba nofonweight textcenter margin_top1">朋友圈</view>
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
		</u-popup>
		<view class="" style="padding-bottom: 100rpx;">
			<!-- 轮播图 -->
			<view class="dingwei">
				<u-swiper :list="list1" height="290px"></u-swiper>
				<view class="bofang"></view>
				<view class="flexleft icowz">
					<u-icon name="share-square" size="26" color="#f5f5f5" @click="show = true"></u-icon>
				</view>
			</view>
			<!-- 赛事名称-->
			<view class="mainpadding ffffff">
				<view class="flexleft">
					<view class="xiaocbtn margin_right1">报名中</view>
					<!-- <view class="xiaolhbtn margin_right1">进行中</view> -->
					<!-- <view class="xiaohbtn margin_right1">已结束</view> -->
					<view class="sanshier xiaohei fonweight">XXX赛事名称</view>
				</view>
			</view>
			<!-- 信息内容 -->
			<view class="ffffff mainpadding margin_top1">
				<view class="flexleft xiahuaxian">
					<view class="zixikd titletext xiaohei nofonweight">主办方/组织人</view>
					<view class=" ershiba xiaohui nofonweight">组织人姓名</view>
				</view>
				<view class="flexleft xiahuaxian margin_top">
					<view class="zixikd titletext xiaohei nofonweight">报名时间</view>
					<view class=" ershiba xiaohui nofonweight">06月16日 19:00-20:00</view>
				</view>
				<view class="flexleft xiahuaxian margin_top">
					<view class="zixikd titletext xiaohei nofonweight">比赛时间</view>
					<view class=" ershiba xiaohui nofonweight">06月16日 19:00-20:00</view>
				</view>
				<view class="flexleft xiahuaxian margin_top">
					<view class="zixikd titletext xiaohei nofonweight">比赛地址</view>
					<view class=" ershiba xiaohui nofonweight">郑州中原区</view>
				</view>
				<view class="flexleft xiahuaxian margin_top">
					<view class="zixikd titletext xiaohei nofonweight">比赛费用</view>
					<view class=" ershiba xiaolv nofonweight">￥500</view>
				</view>
				<view class="flexleft xiahuaxian margin_top">
					<view class="zixikd titletext xiaohei nofonweight">比赛类别</view>
					<view class="flexleft">
						<view class="hxhuibtn margin_right2">团体赛</view>
						<view class="hxhuibtn margin_right2">单打</view>
					</view>
				</view>
				<view class="flexleft xiahuaxian margin_top" @click="cktbm">
					<view class="zixikd titletext xiaohei nofonweight">已报名</view>
					<view class="flexbetween" style="width: 68%;">
						<view class="flexleft">
							<view class=" ershiba xiaohui nofonweight margin_right1">20/20</view>
							<view class="touxia margin_right1" v-for="item in 3">
								<image src="../static/image/system/ms.png" mode=""></image>
							</view>
							<view class=" ershiba xiaohui nofonweight margin_right1">...</view>
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="xiahuaxian margin_top">
					<view class=" titletext xiaohei nofonweight">赛制章程</view>
					<view class=" titletext xiaohui nofonweight margin_top1">
						赛制章程赛制章程赛制章程赛制章程赛制章程赛制章程赛制章程赛制章程赛制章程赛制章程赛制章程赛制章程赛制章程赛制章程赛制章程赛制章程赛制章程
					</view>
				</view>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="gudingdb mainpadding ffffff">
			<view class=" flexbetween" @click="tzbm">
				<view class="xiaohong ershiba fonweight">￥500</view>
				<view class="xiaobtnty">点击报名</view>
			</view>
			<!-- 进行中 -->
			<!-- <view class="huibigbtntys">进行中</view> -->
			<!-- 已结束 -->
			<!-- <view class="huibigbtntys">已结束</view> -->
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				show: false,
				fxshow: false,
			}
		},
		methods: {
			// 跳转查看已报名
			cktbm(){
				uni.navigateTo({
					url:'/pages_julebu/bisaiyibm'
				})
			},
			// 跳转赛事报名
			tzbm(){
				uni.navigateTo({
					url:'/pages_julebu/bisaibx'
				})
			},
			close() {
				this.show = false
			},
			fxclose() {
				this.fxshow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	page {
		background-color: #F9F9F9;
	}

	.zixikd {
		width: 220rpx;
	}

	.cgtpiam {
		height: 360rpx;
		width: 100%;
		border-radius: 16rpx;
	}

	.touxia {
		border-radius: 50%;
		width: 40rpx;
		height: 40rpx;

		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}

	.hxhuibtn {
		width: 100rpx;
		height: 40rpx;
		background: #F9F9F9;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #777777;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.huisebtn {
		width: 140rpx;
		height: 56rpx;
		background: #F5F5F5;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #777777;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.lvsebtn {
		width: 140rpx;
		height: 56rpx;
		background: #1BA95B;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiaolabtn {
		width: 80rpx;
		height: 40rpx;
		background: #078CE6;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiaohbtn {
		width: 100rpx;
		height: 40rpx;
		background: #BAC3D5;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #091636;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiaolhbtn {
		width: 80rpx;
		height: 40rpx;
		background: #1BA95B;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiaojubtn {
		width: 80rpx;
		height: 40rpx;
		background: #F8B900;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiaocbtn {
		width: 80rpx;
		height: 40rpx;
		background: #F76222;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.guandys {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.bofang {
		width: 120rpx;
		height: 120rpx;
		background-size: 100% 100%;
		position: absolute;
		bottom: 222rpx;
		left: 316rpx;
		background-image: url('../static/image/system/bfh.png');
	}

	.erwim {
		width: 128rpx;
		height: 128rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.erwmtu {
		width: 412rpx;
		height: 328rpx;
		border-radius: 8rpx;

		image {
			border-radius: 8rpx;
			width: 100%;
			height: 100%;
		}
	}

	.icowz {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}
</style>